<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>控制面板</title>
    <%@ include file="inc/css.jsp" %>
</head>

<style>
    .textAling {
        text-align: center;
    }
</style>

<body>

<div id="posts" class="wrapper">
    <%@ include file="inc/nav.jsp" %>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header" style="text-align: center;">${adminUser.account}，欢迎进入三力视频后台管理系统</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="backend/appUser/index" class="btn btn-outline btn-primary btn-lg" role="button">新增用户（${newAppUserCount}）</a>
                        <a href="backend/companyUser/index" class="btn btn-outline btn-primary btn-lg" role="button">新增广告主（${newCompanyUserCount}）</a>
                        <a href="backend/video/index" class="btn btn-outline btn-primary btn-lg" role="button">新增视频（${newVideoCount}）</a>
                        <a href="backend/post/index" class="btn btn-outline btn-primary btn-lg" role="button">新增帖子（${newPostCount}）</a>
                        <a href="backend/companyUser/indexToCheck" class="btn btn-outline btn-primary btn-lg" role="button">新增广告主认证（${newCompanyUserCountNoCheck}）</a>
                        <a href="backend/finance/gain/index" class="btn btn-outline btn-primary btn-lg" role="button">新增提现申请（${newAppUserGainCount}）</a>
                        <a href="backend/feedBack/index" class="btn btn-outline btn-primary btn-lg" role="button">新增意见反馈（${newFeedBackCount}）</a>

                        <select class="form-control" id="days" onchange="_backendPanel.fn.changeDays(this)" style="width: 120px; float: right">
                            <option value="" <c:if test="${null == index || index == ''}">selected</c:if>>请选择周期</option>
                            <option value="1" <c:if test="${index == 1}">selected</c:if>>----今日----</option>
                            <option value="7" <c:if test="${index == 7}">selected</c:if>>----本周----</option>
                            <option value="30" <c:if test="${index == 30}">selected</c:if>>----本月----</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel-body">
            <h3>视频统计信息</h3>

            <div class="col-sm-12">
                <table class="table table-striped table-bordered table-hover">
                    <colgroup>
                        <col class="gradeA odd"/>
                        <col class="gradeA even"/>
                        <col class="gradeA odd"/>
                        <col class="gradeA even"/>
                    </colgroup>
                    <thead>
                    <tr>
                        <td width="25%;" class="textAling">视频总数</td>
                        <td width="25%;" class="textAling">${allVideoCount}</td>
                        <td width="25%;" class="textAling">待审核视频数量</td>
                        <td width="25%;" class="textAling">${waitCheckVideoCount}</td>
                    </tr>
                    <tr>
                        <td width="25%;" class="textAling">投放中视频数量</td>
                        <td width="25%;" class="textAling">${workVideoCount}</td>
                        <td width="25%;" class="textAling">下架中视频数量</td>
                        <td width="25%;" class="textAling">${noShoppingVideoCount}</td>
                    </tr>
                    <tr>
                        <td width="25%;" class="textAling">审核失败视频数量</td>
                        <td width="25%;" class="textAling">${failCheckVideoCount}</td>
                        <td width="50%;" class="textAling" colspan="2"></td>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="panel-body">
            <h3>用户帖子统计信息</h3>

            <div class="col-sm-12">
                <table class="table table-striped table-bordered table-hover">
                    <colgroup>
                        <col class="gradeA odd"/>
                        <col class="gradeA even"/>
                        <col class="gradeA odd"/>
                        <col class="gradeA even"/>
                    </colgroup>
                    <thead>
                    <tr>
                        <td width="25%;" class="textAling">帖子总数</td>
                        <td width="25%;" class="textAling">${allPostCount}</td>
                        <td width="25%;" class="textAling">待审核帖子数量</td>
                        <td width="25%;" class="textAling">${waitCheckPostCount}</td>
                    </tr>
                    <tr>
                        <td width="25%;" class="textAling">审核成功帖子数量</td>
                        <td width="25%;" class="textAling">${okCheckPostCount}</td>
                        <td width="50%;" class="textAling" colspan="2"></td>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="panel-body">
            <h3>用户统计信息</h3>

            <div class="col-sm-12">
                <table class="table table-striped table-bordered table-hover">
                    <colgroup>
                        <col class="gradeA odd"/>
                        <col class="gradeA even"/>
                        <col class="gradeA odd"/>
                        <col class="gradeA even"/>
                    </colgroup>
                    <thead>
                    <tr>
                        <td width="25%;" class="textAling">全部会员</td>
                        <td width="25%;" class="textAling">${allUserCount}</td>
                        <td width="25%;" class="textAling">普通用户</td>
                        <td width="25%;" class="textAling">${allAppUserCount}</td>
                    </tr>
                    <tr>
                        <td width="25%;" class="textAling">广告主</td>
                        <td width="25%;" class="textAling">${allCompanyUserCount}</td>
                        <td width="50%;" class="textAling" colspan="2"></td>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="panel-body">
            <h3>统计详情</h3>

            <div class="col-sm-12">
                <select class="form-control" style="width: 155px;float: right;" onchange="_backendPanel.fn.changeStatData(this)">
                    <option value="1">请选择周期</option>
                    <option value="2">昨天（包含今天）</option>
                    <option value="7">7天内</option>
                    <option value="30">30天内</option>
                </select>
                <div id="echart1" style="height:400px"></div>
            </div>
        </div>

        <div class="panel-body">
            <h3>用户统计分布</h3>

            <div class="col-sm-6">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="echart2" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <div id="echart3" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <div id="echart4" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <div id="echart5" style="height:400px"></div>
            </div>
        </div>

    </div>

</div>

<%@ include file="inc/footer.jsp" %>
</body>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    var _backendPanel = {
        fn: {
            init: function () {
                // 路径配置
                require.config({
                    paths: {
                        echarts: 'http://echarts.baidu.com/build/dist'
                    }
                });

                _backendPanel.fn.getStatData(1);

                _backendPanel.fn.getStatUserData();
            },
            getStatData: function (day) {
                $leoman.ajax("common/statData", {
                    "day": day
                }, function (result) {
                    if (null != result) {
                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                                    'echarts/chart/line' // 使用柱状图就加载line模块，按需加载
                                ],
                                function (ec) {
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart = ec.init(document.getElementById('echart1'));

                                    var option = {
                                        tooltip: {
                                            trigger: 'axis'
                                        },
                                        legend: {
                                            data: ['视频点击量', '用户增长量']
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: result.dayList
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                name: '视频点击量',
                                                type: 'line',
                                                stack: '总量',
                                                data: result.videoClickNumList
                                            },
                                            {
                                                name: '用户增长量',
                                                type: 'line',
                                                stack: '总量',
                                                data: result.userGrowNumList
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart.setOption(option);
                                }
                        );
                    }
                });
            },
            changeStatData: function (self) {
                _backendPanel.fn.getStatData($(self).val());
            },
            changeDays: function (self) {
                window.location.href = "backend/dashboard?index=" + $(self).val();
            },
            getStatUserData: function () {
                $leoman.ajax("common/statUserData", null, function (result) {
                    if (null != result) {
                        var nameArray = new Array();
                        var valArray = new Array();

                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                                ],
                                function (ec) {
                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.sexList.length; i++) {
                                        nameArray.push(result.sexList[i].name);
                                        valArray.push(result.sexList[i].content);
                                    }

                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart2 = ec.init(document.getElementById('echart2'));

                                    var option2 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '性别'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                barWidth: 80,
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart2.setOption(option2);


                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.ageList.length; i++) {
                                        nameArray.push(result.ageList[i].name);
                                        valArray.push(result.ageList[i].content);
                                    }
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart3 = ec.init(document.getElementById('echart3'));

                                    var option3 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '年龄'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart3.setOption(option3);


                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.provinceList.length; i++) {
                                        nameArray.push(result.provinceList[i].name);
                                        valArray.push(result.provinceList[i].content);
                                    }
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart4 = ec.init(document.getElementById('echart4'));

                                    var option4 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '排名前6的省份'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart4.setOption(option4);


                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.cityList.length; i++) {
                                        nameArray.push(result.cityList[i].name);
                                        valArray.push(result.cityList[i].content);
                                    }
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart5 = ec.init(document.getElementById('echart5'));

                                    var option5 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '排名前6的城市'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart5.setOption(option5);
                                }
                        );
                    }
                });
            }
        }
    }

    $(document).ready(function () {
        _backendPanel.fn.init();
    });
</script>

</html>